<!--
 * @Author: GKN
 * @Date: 2023-07-24 14:08:42
 * @LastEditTime: 2023-11-28 11:17:33
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\components\banner.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div class="withFull bannerView" :style="style">
        <el-carousel @change="carouselChange" width="100%" height="440px" direction="horizontal" indicator-position="none" :interval="3500">
            <el-carousel-item v-for="item in list" :key="item" @click="goInfo(item)">
                <imgView :src="item.thumb" />
                <div class="po-ab0 xf-font" style="width: 100%;text-align: left;">
                    {{item.name }}
                  </div>
            </el-carousel-item>
        </el-carousel>
        <div class="indicationPoint">
            <div v-for="(item,i) in list" :key="i" :class="bannerIndex == i?'item1':'item2'"></div>
        </div>
    </div>
  </template>
  
  <script>
  import CryptoJS from 'crypto-js';
  export default {
    components:{},
    props: {
          list: {
              type: Object,
              default: []
          },
          style:{
              type: String,
              default: ''
          }
      },
    data: function() {
      return {
        bannerIndex:0,
      }
    },
    methods: {
      moreClick(){
          this.$emit('moreClick')
      },
        carouselChange (e){
            this.bannerIndex = e
        },
        goInfo(item){
          this.$emit('goInfo',item)
        }
    },
    created() {}
  }
  </script>
  
  <style lang='less' scoped>
  .bannerView{
    position: relative;
  }
    .indicationPoint{
        display: flex;
        position: absolute;
        right:40px;
        bottom: 10px;
        z-index: 2;
        .item1{
            width: 40px;
            height: 8px;
            border-radius: 20px;
            background: rgba(209, 11, 0,1);
            margin-left: 16px;
        }
        .item2{
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(216, 214, 212,1);
            margin-left: 16px;
        }
    }
  </style>
  